<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html>
<!--<![endif]-->

<head>
<meta charset="utf-8">
<title>Boo Admin - Form Extension</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="assets/css/lib/bootstrap.css" rel="stylesheet">
<link href="assets/css/lib/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/extension.css" rel="stylesheet">
<link href="assets/css/boo.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/boo-coloring.css" rel="stylesheet">
<link href="assets/css/boo-utility.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="assets/plugins/selectivizr/selectivizr-min.js"></script>
    <script src="assets/plugins/flot/excanvas.min.js"></script>
<![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.html">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.html">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.html">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.html">
</head>

<body class="sidebar-left panel-side">
<div class="page-container">
    <div id="header-container">
        <div id="header">
            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container-fluid">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                        <a class="brand" href="javascript:void(0);"><img src="assets/img/demo/logo-brand.png"></a>
                        <div class="search-global">
                            <input id="globalSearch" class="search search-query input-medium" type="search">
                            <a class="search-button" href="javascript:void(0);"><i class="fontello-icon-search-5"></i></a> </div>
                        <div class="nav-collapse collapse">
                            <ul class="nav user-menu visible-desktop">
                                <li><a class="btn-glyph fontello-icon-edit tip-bc" href="javascript:void(0);" title="Messages"><span class="badge badge-important">8</span></a></li>
                                <li><a class="btn-glyph fontello-icon-mail-1 tip-bc" href="javascript:void(0);" title="Emails"></a></li>
                                <li><a class="btn-glyph fontello-icon-lifebuoy tip-bc" href="javascript:void(0);" title="Support"><span class="badge badge-important">4</span></a></li>
                            </ul>
                            <ul class="nav">
                                <li> <a href="dashboard-one.html">Dashboard</a> </li>
                                <li class="active"> <a href="javascript:void(0);">Components</a> </li>
                                <li> <a href="component-fullcalendar-demo.html"><span class="fontello-icon-calendar"></span>Calendar</a> </li>
                                <li> <a href="javascript:void(0);"><span class="fontello-icon-users"></span>Contacts</a> </li>
                                <li class="dropdown"> <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><span class="fontello-icon-list-1"></span>Customize <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="component-form-demo.html">Demo Form</a></li>
                                        <li><a href="component-widgets-remember.html">Remember</a></li>
                                        <li><a href="component-widgets-users.html">User List</a></li>
                                        <li class="divider"></li>
                                        <li class="nav-header">Next Update</li>
                                        <li><a href="javascript:void(0);">Contacts</a></li>
                                        <li><a href="javascript:void(0);">Email</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- // navbar -->
            
            <div class="header-drawer">
                <div class="mobile-nav text-center visible-phone"> <a href="javascript:void(0);" class="mobile-btn" data-toggle="collapse" data-target=".sidebar"><i class="aweso-icon-chevron-down"></i> Components</a> </div>
                <!-- // Resposive navigation -->
                <div class="breadcrumbs-nav hidden-phone">
                    <ul id="breadcrumbs" class="breadcrumb">
                        <li><a href="javascript:void(0);"><i class="fontello-icon-home f12"></i> Dashboard</a> <span class="divider">/</span></li>
                        <li class="dropdown"><a href="javascript:void(0);">Table </a> <span class="divider">/</span>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:void(0);">Table</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                                <li><a href="javascript:void(0);">Elements</a></li>
                            </ul>
                        </li>
                        <li class="active">Boo Admin </li>
                    </ul>
                </div>
                <!-- // breadcrumbs --> 
            </div>
            <!-- // drawer --> 
        </div>
    </div>
    <!-- // header-container -->
    
    <div id="main-container">
        <div id="main-sidebar" class="sidebar sidebar-inverse">
            <div class="sidebar-item">
                <div class="media profile">
                    <div class="media-thumb media-left thumb-bordereb"> <a class="img-shadow" href="javascript:void(0);"><img class="thumb" src="assets/img/demo/demo-avatar9604.jpg"></a> </div>
                    <div class="media-body">
                        <h5 class="media-heading">Twitter Bootstrap <small>as Administrator</small></h5>
                        <p class="data">Last Access: 16 May 15:30</p>
                    </div>
                </div>
            </div>
            <!-- // sidebar item - profile -->
            
            <ul id="mainSideMenu" class="nav nav-list nav-side">
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accDash" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-monitor"></span> <i class="chevron fontello-icon-right-open-3"></i> Dashboards </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accDash">
                        <li> <a href="dashboard-one.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Dashboard</span> Demo 1 </a> </li>
                        <li> <a href="dashboard-two.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Dashboard</span> Demo 2 </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Dashboard -->
                <li class="accordion-group">
                    <div class="accordion-heading active"> <a href="#accForms" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon aweso-icon-list-alt"></span><i class="chevron fontello-icon-right-open-3"></i> Form </a> </div>
                    <ul class="accordion-content nav nav-list collapse in" id="accForms">
                        <li> <a href="component-form-demo.html"> <i class="fontello-icon-right-dir"></i> Demo Form </a> </li>
                        <li> <a href="component-form-element.html"> <i class="fontello-icon-right-dir"></i> Form Element </a> </li>
                        <li class="active"> <a href="component-form-extension.html"> <i class="fontello-icon-right-dir"></i> Form Extension</a> </li>
                        <li> <a href="component-form-wizard.html"> <i class="fontello-icon-right-dir"></i> Form Wizard</a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Forms -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accTables" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-align-justify"></span> <i class="chevron fontello-icon-right-open-3"></i> Tables </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accTables">
                        <li> <a href="component-table.html"> <i class="fontello-icon-right-dir"></i> Base Table </a> </li>
                        <li> <a href="component-table-boo.html"> <i class="fontello-icon-right-dir"></i> Boo Table </a> </li>
                        <li> <a href="component-table-datatable.html"> <i class="fontello-icon-right-dir"></i> DataTable </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Tables -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accStatistics" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-chart"></span> <i class="chevron fontello-icon-right-open-3"></i> Statistics </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accStatistics">
                        <li> <a href="statistic-flot.html"> <i class="fontello-icon-right-dir"></i> Charts </a> </li>
                        <li> <a href="statistic-sparkline.html"> <i class="fontello-icon-right-dir"></i> Sparklines </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Statistics -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accWidgets" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon  fontello-icon-window"></span> <i class="chevron fontello-icon-right-open-3"></i> Widgets </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accWidgets">
                        <li> <a href="component-widget-style.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Widgets </span> Style </a> </li>
                        <li> <a href="component-widget-custom.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Widgets </span> Custom </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Widgets -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accButtons" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-puzzle"></span> <i class="chevron fontello-icon-right-open-3"></i> UI Elements </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accButtons">
                        <li> <a href="elements-button.html"> <i class="fontello-icon-right-dir"></i> Button </a> </li>
                        <li> <a href="elements-icon-font.html"> <i class="fontello-icon-right-dir"></i> Iconic fonts </a> </li>
                        <li> <a href="elements-icon-fugue-demo.html"> <i class="fontello-icon-right-dir"></i> Icon </a> </li>
                        <li> <a href="elements-wells.html"> <i class="fontello-icon-right-dir"></i> Wells </a> </li>
                        <li> <a href="elements-tabs.html"> <i class="fontello-icon-right-dir"></i> Tabs </a> </li>
                        <li> <a href="elements-modals.html"> <i class="fontello-icon-right-dir"></i> Modal </a> </li>
                        <li> <a href="elements-progressbar.html"> <i class="fontello-icon-right-dir"></i> Progressbar </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu UI Elements -->
                <li class="accordion-group">
                    <div class="accordion-heading"> <a href="#accCalendar" data-parent="#mainSideMenu" data-toggle="collapse" class="accordion-toggle"> <span class="item-icon fontello-icon-calendar"></span> <i class="chevron fontello-icon-right-open-3"></i> Calendar </a> </div>
                    <ul class="accordion-content nav nav-list collapse" id="accCalendar">
                        <li> <a href="component-fullcalendar-demo.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Calendar </span> Demo </a> </li>
                        <li> <a href="component-fullcalendar.html"> <i class="fontello-icon-right-dir"></i> <span class="hidden-tablet">Calendar </span> Style </a> </li>
                    </ul>
                </li>
                <!-- // item accordionMenu Calendar -->
            </ul>
            <!-- // sidebar menu -->
            
            <div class="sidebar-item"></div>
            <!-- // sidebar item --> 
            
        </div>
        <!-- // sidebar -->
        
        <div id="main-content" class="main-content container-fluid">
            <div class="row-fluid page-head">
                <h2 class="page-title"><i class="aweso-icon-list-alt"></i> Forms Extension <small>next plugins for form</small></h2>
                <div class="page-bar">
                    <div class="btn-toolbar"> </div>
                </div>
            </div>
            <!-- // page head -->
            
            <div id="page-content" class="page-content">
                <section>
                    <div class="page-header">
                        <h3><i class="fontello-icon-article-alt opaci35"></i> Wysiwyg editors <small>edit content</small></h3>
                    </div>
                    <div class="row-fluid">
                        <form class="span7 margin-00">
                            <div class="well well-nice">
                                <h4 class="simple-header">Wysihtml5 <small>Simple wysiwyg editors</small></h4>
                                <div class="control-group">
                                    <textarea id="wysiBooEditor" class="input-block-level" style="height: 160px" placeholder="Enter text ..."></textarea>
                                    <!-- // fieldset Input -->
                                    <div class="btn-toolbar"><a class="btn btn-green pull-right" href="javascript:void(0);">Save</a></div>
                                </div>
                            </div>
                            <div class="well well-nice form-dark">
                                <div class="control-group">
                                    <textarea id="wysiBooEditorBlack" class="input-block-level" style="height: 100px" placeholder="Enter text ..."></textarea>
                                    <!-- // fieldset Input Grid Sizig --> 
                                </div>
                            </div>
                        </form>
                        <!-- // Column -->
                        
                        <div class="span5"> </div>
                        <!-- // Column --> 
                        
                    </div>
                    <!-- // Example row --> 
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="fontello-icon-doc-2 opaci35"></i> Files <small>file management</small></h3>
                    </div>
                    <div class="row-fluid margin-bottom30">
                        <div class="span7">
                            <p>The file upload plugin allows you to create a visually appealing file or image upload widgets.</p>
                            <h4 class="simple-header"> File upload <small>base</small></h4>
                            <div class="fileupload fileupload-new" data-provides="fileupload"> <span class="btn btn-file"> <span class="fileupload-new">Select file</span> <span class="fileupload-exists">Change</span>
                                <input type="file" />
                                </span> <span class="fileupload-preview"></span> <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a> </div>
                            <!-- // file upload -->
                            
                            <h4 class="simple-header"> File upload <small>with file input</small> </h4>
                            <div class="fileupload fileupload-new" data-provides="fileupload">
                                <div class="input-append">
                                    <div class="uneditable-input span4"> <i class="fontello-icon-doc-2 fileupload-exists"></i> <span class="fileupload-preview"></span> </div>
                                    <span class="btn btn-file"> <span class="fileupload-new">Select file</span> <span class="fileupload-exists">Change</span>
                                    <input type="file" />
                                    </span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> </div>
                            </div>
                            <!-- // file upload -->
                            
                            <p>When uploading an image, it's possible to show a thumbnail instead of the filename.</p>
                            <div class="row-fluid margin-bottom20">
                                <div class="span6">
                                    <h4 class="simple-header"> Image upload <small>fix size</small> </h4>
                                    <div class="well well-nice inline">
                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                            <div class="fileupload-preview thumbnail" style="width: 200px; height: 120px;"></div>
                                            <div> <span class="btn btn-file"> <span class="fileupload-new">Select image</span> <span class="fileupload-exists">Change</span>
                                                <input type="file" />
                                                </span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> </div>
                                        </div>
                                        <!-- // image upload --> 
                                    </div>
                                </div>
                                <!-- // Column -->
                                
                                <div class="span6">
                                    <h4 class="simple-header"> Image upload <small>adaptable size</small> </h4>
                                    <div class="well well-black inline">
                                        <div class="fileupload fileupload-new" data-provides="fileupload">
                                            <div class="fileupload-new thumbnail" style="width: 200px; height: 120px;"> <img src="http://www.placehold.it/200x120/EFEFEF/AAAAAA&amp;text=no+image" /> </div>
                                            <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                            <div> <span class="btn btn-file"> <span class="fileupload-new">Select image</span> <span class="fileupload-exists">Change</span>
                                                <input type="file" />
                                                </span> <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> </div>
                                        </div>
                                        <!-- // image upload --> 
                                    </div>
                                </div>
                                <!-- // Column --> 
                            </div>
                            <!-- // Example row -->
                            
                            <h4 class="simple-header"> Image upload <small>floating</small> </h4>
                            <div class="fileupload fileupload-new pull-left" data-provides="fileupload">
                                <div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"> <img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /> </div>
                                <div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
                                <span class="btn btn-file" style="vertical-align:top"> <span class="fileupload-new">Select image</span> <span class="fileupload-exists">Change</span>
                                <input type="file" />
                                </span> <a href="#" class="btn btn-red fileupload-exists" data-dismiss="fileupload" style="vertical-align:top">Remove</a> </div>
                            <!-- // image upload -->
                            
                            <div class="fileupload fileupload-new pull-right" data-provides="fileupload" style="text-align: right"> <span class="btn btn-file" style="vertical-align:top"> <span class="fileupload-new">Select image</span> <span class="fileupload-exists">Change</span>
                                <input type="file" />
                                </span> <a href="#" class="btn btn-red fileupload-exists" data-dismiss="fileupload" style="vertical-align:top">Remove</a>
                                <div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"> <img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" /></div>
                                <div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
                            </div>
                            <!-- // image upload --> 
                        </div>
                        <!-- // Column -->
                        
                        <div class="span5"></div>
                        <!-- // Column --> 
                        
                    </div>
                    <!-- // Example row --> 
                </section>
                <section>
                    <div class="page-header">
                        <h3><i class="fontello-icon-calendar opaci35"></i> Datepicker <small>Plugins for Bootstrap</small></h3>
                    </div>
                    <div class="row-fluid">
                        <div class="span5">
                            <div>
                                <h4 class="simple-header"><i class="fontello-icon-calendar opaci35"></i> Datapicker <small>Add to field or to any other element.</small></h4>
                                <p>Attached to a field with the format specified via options.</p>
                                <div class="well well-nice well-small">
                                    <input id="datePicker" class="input-medium margin-00" type="text" value="09-19-2012" >
                                </div>
                                <!-- // datapicker -->
                                
                                <p>Attached to a field with the format specified via data tag.</p>
                                <div class="well well-nice well-small">
                                    <input id="datePickerVia" class="input-medium margin-00" type="text" value="09/19/12" data-date-format="mm/dd/yy" >
                                    <a href="javascript:void(0);" id="DPV" class="btn btn-green">manual set to 10/10/12</a> </div>
                                <pre class="prettyprint linenums">
&lt;div id=&quot;datePickerVia&quot; data-date=&quot;09/19/12&quot; data-date-format=&quot;mm/dd/yy&quot;&gt;&lt;/div&gt;
</pre>
                                <!-- // datapicker VIA -->
                                
                                <p>As component.</p>
                                <div class="well well-nice well-small">
                                    <div id="datePickerComponent" class="input-append date margin-00" data-date="09-19-2012" data-date-format="dd-mm-yyyy">
                                        <input class="input-medium" size="16" type="text" value="09-02-2012" readonly>
                                        <span class="add-on"><i class="fontello-icon-calendar"></i></span> </div>
                                </div>
                                <!-- // datapicker COMPONENT -->
                                
                                <p>Attached to other elment then field and using events to work with the date values.</p>
                                <div class="well well-nice well-small">
                                    <div class="alert alert-error" id="alert" style="display: none;"> <span class="msg">Oh snap!</span> </div>
                                    <table class="table table-bordered">
                                        <thead>
                                            <tr>
                                                <th>Start date<a href="#" id="DTP1" class="btn btn-small btn-info margin-side" data-date-format="yyyy-mm-dd" data-date="2012-02-20"><i class="fontello-icon-calendar"></i> Change</a></th>
                                                <th>End date<a href="#" id="DTP2" class="btn btn-small btn-info margin-side" data-date-format="yyyy-mm-dd" data-date="2012-02-25"><i class="fontello-icon-calendar"></i> Change</a></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td id="startDate">2012-02-20</td>
                                                <td id="endDate">2012-02-25</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- // datapicker DATE VALUES -->
                                
                                <p>Attached to <i>div</i> (inline)</p>
                                <div class="well well-nice">
                                    <div id="showDate" class="well well-impressed well-small">09-09-2012</div>
                                    <a href="javascript:void(0);" id="DPTD" class="btn btn-green pull-right">manual set to 01-09-1969</a>
                                    <div id="datePickerToDiv" data-date="09-09-2012" data-date-format="dd-mm-yyyy"></div>
                                </div>
                            </div>
                        </div>
                        <!-- // Column -->
                        
                        <div class="span7">
                            <h4 class="simple-header"><i class="fontello-icon-calendar opaci35"></i><i class="fontello-icon-calendar opaci35"></i> DateRangePicker <small>select date range</small></h4>
                            <p>The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS.</p>
                            <form class="form-horizontal well well-nice well-small small-labels">
                                <fieldset>
                                    <div class="control-group margin-00">
                                        <label class="control-label" for="selectrange">Reservation dates:</label>
                                        <div class="controls">
                                            <div class="input-append">
                                                <input id="selectrange" class="margin-00" type="text" name="reservation" />
                                                <span class="add-on"><i class="fontello-icon-calendar"></i></span> </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                            <!-- // datarangepicker -->
                            
                            <p>Pre-defined Ranges & Custom callback handler</p>
                            <div class="well well-small well-nice">
                                <div id="reportdate" class="btn btn-info margin-00" type="text" name="reportdate"> <i class="fontello-icon-calendar"></i> <span>Select report date</span> </div>
                            </div>
                            <form class="form-horizontal well well-nice well-small small-labels">
                                <fieldset>
                                    <div class="input-append">
                                        <input id="reportView" type="text" name="reportView" value="08-10-2012 - 29-10-2012">
                                        <button id="reportSelect" class="btn" name="reportSelect">Select a time period <span class="caret"></span></button>
                                    </div>
                                </fieldset>
                            </form>
                            <!-- // datarangepicker -->
                            
                            <ul>
                                <li>Custom callback handler called when the date range selection is made</li>
                                <li>Setting initial start and end dates for the calendars</li>
                                <li>Bounding the minimum and maximum selectable dates</li>
                                <li>Overriding all labels in the interface with localized text</li>
                                <li>Starting the calendar week on any day of week</li>
                                <li>Overriding the direction the dropdown expands (left/right of element it's attached to)</li>
                                <li>Setting the date format string for parsing string inputs</li>
                            </ul>
                            <p><br />
                            </p>
                            <h4 class="simple-header"><i class="fontello-icon-palette opaci35"></i> ColorPicker <small>select color</small></h4>
                            <p>Attached to a field with hex format specified via options.</p>
                            <div class="well well-nice well-small">
                                <input class="input-medium colorpicker margin-00" type="text" value="#8fff00" >
                            </div>
                            <p>Attachet to a field with the rgba format specified via data tag.</p>
                            <div class="well well-nice well-small">
                                <input class="input-medium colorpicker margin-00" type="text" value="rgb(0,194,255,0.78)" data-color-format="rgba" >
                            </div>
                            <p>As component.</p>
                            <div class="well well-nice well-small">
                                <div id="cpComponent" class="input-append margin-00 color" data-color="rgb(255, 146, 180)" data-color-format="rgb">
                                    <input type="text" class="input-medium" value="" readonly >
                                    <span class="add-on"><i style="background-color: rgb(255, 146, 180)"></i></span> </div>
                            </div>
                            <p>Using events to work with the color.</p>
                            <div id="colored" class="well well-nice well-small"> 
                                <a href="#" class="btn btn-cayen" id="cpCHANGE" data-color="rgb(206, 229, 235)" data-color-format="hex">Change background color</a> 
                            </div>
                        </div>
                        <!-- // Column --> 
                        
                    </div>
                    <!-- // Example row --> 
                </section>
                <section>
                    <div class="row-fluid">
                        <form class="form-horizontal span7">
                            <fieldset>
                                <legend><i class="fontello-icon-th-list-1"></i> Input fields</legend>
                                <ul class="form-list">
                                    <li class="control-group">
                                        <label class="control-label" for="fieldRregular">Usual input field:</label>
                                        <div class="controls">
                                            <input id="fieldRregular" class="span6" type="text" name="regular" placeholder="your name…">
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="fieldPassword">Password field:</label>
                                        <div class="controls">
                                            <input id="fieldPassword" class="span6" type="password" placeholder="enter password…">
                                            <span class="help-inline">In addition to freeform text.</span> </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="fieldReadonly">Read Only:</label>
                                        <div class="controls">
                                            <input id="fieldReadonly" class="span6" type="text" readonly name="readonly" value="read only">
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label for="fieldNote" class="control-label">
                                        Notice for field:
                                        <p class="help-block">Info for label here.</p>
                                        </label>
                                        <div class="controls">
                                            <input id="fieldNote" class="span6" type="text" name="regularNote" placeholder="Info for field">
                                            <span class="help-inline">This is an inline comment.</span>
                                            <p class="help-block"><strong>Note:</strong> Boo Admin Template version 1.0</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="fieldPredefined">Predefined value:</label>
                                        <div class="controls">
                                            <input id="fieldPredefined" class="span6" type="text" name="predefined" value="http://">
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                </ul>
                                <!-- // form list -->
                                
                            </fieldset>
                            <fieldset>
                                <legend><i class="fontello-icon-th-list-1"></i> Input fields</legend>
                                <ul class="form-list list-bordered">
                                    <li class="control-group">
                                        <label for="fieldBTooltip" class="control-label">Field with tooltip:</label>
                                        <div class="controls">
                                            <input id="fieldBTooltip" class="span6 Rtip" type="text" name="regularTooltip" rel="tooltip" data-original-title="Bootstrap Tooltip for field - Top | Right | Bottom | Left" placeholder="hover show Bootstrap tooltip">
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label for="fieldGtip" class="control-label">Field with tooltip:</label>
                                        <div class="controls">
                                            <input id="fieldGtip" class="span6 tip-rc" type="text" name="regularTooltip" title="Tooltip Gtip2 for field - many positions" placeholder="hover show Tooltip Gtip2">
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label for="fieldPopoverHover" class="control-label">With help popover:</label>
                                        <div class="controls">
                                            <input id="fieldPopoverHover" class="span6" type="text" name="fieldPopoverHover" placeholder="hover to icon for help">
                                            <span class="help-inline help-icon" rel="popover-hover" data-content="Bootstrap popover tips<br> Top | Right | Bottom | Left - default right" data-original-title="Here title for popover"><i class="fontello-icon-help-circle"></i></span> </div>
                                    </li>
                                    <!-- // control group -->
                                </ul>
                                <!-- // form list -->
                                
                            </fieldset>
                            <fieldset>
                                <legend><i class="fontello-icon-th-list-1"></i> Input fields</legend>
                                <ul class="form-list list-bordered dotted">
                                    <li class="control-group">
                                        <label for="limiteChar" class="control-label">Limited characters:</label>
                                        <div class="controls">
                                            <input id="limiteChar" class="span6 limiteChar15" type="text">
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label for="limiteWords" class="control-label">Limited words:</label>
                                        <div class="controls">
                                            <textarea id="limiteWords" rows="3" class="span6 limiteWords15"></textarea>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label for="regularClearText" class="control-label">Field clear text:</label>
                                        <div class="controls">
                                            <input id="regularClearText" class="span6 clear-field" type="text" placeholder="enter text and clear">
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label for="textareaClearText" class="control-label">Textarea clear text:</label>
                                        <div class="controls">
                                            <textarea id="textareaClearText" rows="3" class="span6 clear-textarea" placeholder="enter text and clear"></textarea>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label for="elasticTextarea" class="control-label">Elastic textarea:</label>
                                        <div class="controls">
                                            <textarea id="elasticTextarea" rows="3" class="span6 auto" placeholder="paste long text"></textarea>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                </ul>
                            </fieldset>
                        </form>
                        <!-- // FORM Input fields -->
                        
                        <form class="form-inline span5 well well-nice">
                            <fieldset>
                                <legend><i class="fontello-icon-terminal"></i> Fields with masked values</legend>
                                <ul class="form-list">
                                    <li class="control-group">
                                        <label class="control-label" for="maskedDate">Date:</label>
                                        <div class="controls">
                                            <input id="maskedDate" class="span7 maskDate" type="text">
                                            <p class="help-inline">99/99/9999</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedPhone">Phone:</label>
                                        <div class="controls">
                                            <input id="maskedPhone" class="span7 maskPhone" type="text">
                                            <p class="help-inline">(999) 999-9999</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedPhoneExt">Phone + Ext:</label>
                                        <div class="controls">
                                            <input id="maskedPhoneExt" class="span7 maskPhoneExt" type="text">
                                            <p class="help-inline">(999) 999-9999? x99999</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedPhoneInt">International Phone:</label>
                                        <div class="controls">
                                            <input id="maskedPhoneInt" class="span7 maskPhoneInt" type="text">
                                            <p class="help-inline">+43 999 999 999</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedTid">Tax ID:</label>
                                        <div class="controls">
                                            <input id="maskedTid" class="span7 maskTid" type="text">
                                            <p class="help-inline">99/99/9998</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedSSN">SSN:</label>
                                        <div class="controls">
                                            <input id="maskedSSN" class="span7 maskSsn" type="text">
                                            <p class="help-inline">999-99-9999</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedProd">Product Key:</label>
                                        <div class="controls">
                                            <input id="maskedProd" class="span7 maskProd" type="text">
                                            <p class="help-inline">a*-999-a999-a999</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedEye">Eye Script:</label>
                                        <div class="controls">
                                            <input id="maskedEye" class="span7 maskEye" type="text">
                                            <p class="help-inline">~9.99 ~9.99 999</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedOrder">Purchase Order:</label>
                                        <div class="controls">
                                            <input id="maskedOrder" class="span7 maskPo" type="text">
                                            <p class="help-inline">aaa-999-*****-9999</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedPercent">Percent:</label>
                                        <div class="controls">
                                            <input id="maskedPercent" class="span7 maskPct" type="text">
                                            <p class="help-inline">99%</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedAccount">Account ID:</label>
                                        <div class="controls">
                                            <input id="maskedAccount" class="span7 maskAcid" type="text">
                                            <p class="help-inline">FP009-99999-2012</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                    
                                    <li class="control-group">
                                        <label class="control-label" for="maskedAccount"></label>
                                        <div class="controls">
                                            <p class="help-block">a - Represents (A-Z,a-z), 9 - Represents (0-9), * - Represents (A-Z,a-z,0-9)</p>
                                        </div>
                                    </li>
                                    <!-- // control group -->
                                </ul>
                            </fieldset>
                        </form>
                        <!-- // FORM Masked values --> 
                    </div>
                    <!-- // row --> 
                </section>
            </div>
            <!-- // page content --> 
            
        </div>
        <!-- // main-content --> 
        
    </div>
    <!-- // main-container  -->
    
    <footer id="footer-fix">
        <div id="footer-sidebar" class="footer-sidebar">
            <div class="navbar">
                <div class="btn-toolbar"> <a class="btn btn-glyph btn-link" href="javascript:void(0);"><i class="fontello-icon-up-open-1"></i></a> </div>
            </div>
        </div>
        <!-- // footer sidebar -->
        
        <div id="footer-content" class="footer-content">
            <div class="navbar navbar-inverse">
                <div class="navbar-inner">
                    <ul class="nav pull-left">
                        <li class="divider-vertical hidden-phone"></li>
                        <li><a id="btnToggleSidebar" class="btn-glyph fontello-icon-resize-full-2 tip hidden-phone" href="javascript:void(0);" title="show hide sidebar"></a></li>
                        <li class="divider-vertical hidden-phone"></li>
                        <li><a id="btnChangeSidebar" class="btn-glyph fontello-icon-login tip hidden-phone" href="javascript:void(0);" title="change sidebar position"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnChangeSidebarColor" class="btn-glyph fontello-icon-palette tip" href="javascript:void(0);" title="change sidebar color"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-cw" href="javascript:void(0);"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="fontello-icon-home-3" href="dashboard-one.html"></a></li>
                        <li class="divider-vertical"></li>
                    </ul>
                    <ul class="nav pull-right">
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-help-2 tip" href="javascript:void(0);" title="help to page"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a class="btn-glyph fontello-icon-cog-4 tip" href="javascript:void(0);" title="settings app"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnLogout" class="btn-glyph fontello-icon-logout-1 tip" href="javascript:void(0);" title="logout"></a></li>
                        <li class="divider-vertical"></li>
                        <li><a id="btnScrollup" class="scrollup btn-glyph fontello-icon-up-open-1" href="javascript:void(0);"><span class="hidden-phone">Scroll</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- // footer content --> 
        
    </footer>
    <!-- // footer-fix  --> 
    
</div>
<!-- // page-container  --> 

<!-- Le javascript --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="assets/plugins/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.min.js"></script> 
<script src="assets/js/lib/jquery.js"></script> 
<script src="assets/js/lib/jquery-ui.js"></script>
<script src="assets/js/lib/bootstrap.js"></script> 
<script src="assets/js/lib/jquery.cookie.js"></script> 

<!-- Plugins Bootstrap  -->
<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 
<script src="assets/plugins/bootstrap-timepicker/js/bootstrap-timepicker.js"></script> 
<script src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script> 
<script src="assets/plugins/bootstrap-daterangepicker/js/date.js"></script> 
<script src="assets/plugins/bootstrap-daterangepicker/js/bootstrap-daterangepicker.js"></script>  
<script src="assets/plugins/bootstrap-fileupload/js/bootstrap-fileupload.js"></script> 
<script src="assets/plugins/bootstrap-rowlink/js/bootstrap-rowlink.js"></script> 
<script src="assets/plugins/bootstrap-progressbar/js/bootstrap-progressbar.js"></script> 
<script src="assets/plugins/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script> 
<script src="assets/plugins/bootstrap-select/bootstrap-select.js"></script>
<script src="assets/plugins/bootstrap-bootbox/bootbox.min.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modalmanager.js"></script> 
<script src="assets/plugins/bootstrap-modal/js/bootstrap-modal.js"></script>
<script src="assets/plugins/bootstrap-wizard/js/bootstrap-wizard.js"></script> 
<script src="assets/plugins/bootstrap-toggle-buttons/js/bootstrap-toggle-buttons.js"></script>

<!-- Plugins Custom -->
<script src="assets/plugins/google-code-prettify/prettify.js"></script> 
<script src="assets/plugins/nicescroll/jquery.nicescroll.min.js"></script> 
<script src="assets/plugins/qtip2/dist/jquery.qtip.min.js"></script> 
<script src="assets/plugins/list/js/list.min.js"></script> 
<script src="assets/plugins/list/plugins/list.paging.min.js"></script> 
<script src="assets/plugins/fullcalendar/fullcalendar.js"></script> 
<script src="assets/plugins/xbreadcrumbs/xbreadcrumbs.js"></script>

<!-- Plugins Forms --> 
<script src="assets/plugins/uniform/jquery.uniform.js"></script> 
<script src="assets/plugins/select2/select2.min.js"></script> 
<script src="assets/plugins/counter/jquery.counter.js"></script> 
<script src="assets/plugins/elastic/jquery.elastic.js"></script> 
<script src="assets/plugins/inputmask/jquery.inputmask.js"></script> 
<script src="assets/plugins/inputmask/jquery.inputmask.extensions.js"></script> 
<script src="assets/plugins/validate/js/jquery.validate.min.js"></script> 
 
<!-- Charts --> 
<script src="assets/plugins/sparkline/jquery.sparkline.js"></script> 
<script src="assets/plugins/flot/jquery.flot.js"></script> 
<script src="assets/plugins/flot/jquery.flot.categories.js"></script> 
<script src="assets/plugins/flot/jquery.flot.grow.js"></script> 
<script src="assets/plugins/flot/jquery.flot.orderBars.js"></script> 
<script src="assets/plugins/flot/jquery.flot.pie.js"></script> 
<script src="assets/plugins/flot/jquery.flot.resize.js"></script> 
<script src="assets/plugins/flot/jquery.flot.selection.js"></script> 
<script src="assets/plugins/flot/jquery.flot.stack.js"></script> 
<script src="assets/plugins/flot/jquery.flot.stackpercent.js"></script> 
<script src="assets/plugins/flot/jquery.flot.time.js"></script> 

<!-- Plugins Tables --> 
<script src="assets/plugins/datatables/media/js/jquery.dataTables.js"></script> 
<script src="assets/plugins/datatables/plugin/jquery.dataTables.plugins.js"></script> 
<script src="assets/plugins/datatables/plugin/jquery.dataTables.columnFilter.js"></script> 

<!-- main js -->
<script src="assets/js/application.js"></script>  

<!-- Only This Demo Page -->  
<script src="assets/js/demo/demo-datepicker.html"></script>
<script src="assets/js/demo/demo-wisyhtml5.js"></script>
 
</body>
</html>
